<template>
    <div class="wrapper-header">
        <img src="../assets/logo2.png"/>
        <input />
        <ul>
            <li>首页</li>
            <li>新手入门</li>
            <li>API</li>
            <li>关于</li>
            <li>注册</li>
            <li>登录</li>
        </ul>
    </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.wrapper-header {
  width: 100%;
  height: 3rem;
  background: #444444;
  position: relative;
  overflow: hidden;

  img {
    width: 2.1rem;
    height: 0.8rem;
    margin-top: -0.2rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin: 0 auto;
  }
  input {
    width:4rem;
    height: 0.5rem;
    position: absolute;
    top: .8rem;
    left: 0;
    right: 0;
    bottom:0;
    margin: 0 auto;
    border: 0;
    border-radius: 0.25rem;
    background: #ccc;
  }
  ul{
      width: 100%;
      list-style: none;
      margin-top: 1.5rem;
      li{
          float: left;
          font-size: .25rem;
          color: #fff;
          padding: .3rem;
      }
  }
}
</style>